<template>
	<!-- 我的订单中心 -->
	<kb-layout :title="title">
		<u-sticky>
			<view class="head-tabs u-padding-left-20 ">
				<up-tabs :list="tabs" @click="onTabClick"></up-tabs>
			</view>
		</u-sticky>

		<view class="scroll-view">

			<view v-for="(order,index) in orderList" :key="index" class="list-box u-margin-20">
				<view class="box-title u-flex u-flex-between u-padding-15 u-margin-top-40">
					<view class="color-gray font-size14">
						<text>下单时间：</text>
						<text> {{order.time_label}}</text>
					</view>
					<view v-if="order.status_label=='unpaid'" class=" font-size14">
						<text>实付金额：</text>
						<text class="color-red">¥ {{order.total_price}}</text>
					</view>
				</view>

				<view class="box-bd font-size14 u-margin-top-15">
					<view class="ticket-type">
						<view class="tags ">
							<text class="font-size14">{{order.ticket_type_label}}</text>
						</view>
					</view>

					<view class=" u-padding-25">

						<view class="u-flex u-flex-between u-margin-bottom-10">
							<view class="order-no  font-size14">
								<text>订单号：</text>
								<text>{{order.order_no}}</text>
								<text class="copy color-gray" @click="copyOrderNo(order.order_no)">复制</text>
							</view>
							<view class="bright font-weight">
								<navigator :url="'/pages/mall/detail?id='+order.id">
								<text>{{order.status_label_txt}}</text>
								</navigator>
							</view>
						</view>

						<navigator :url="'/pages/mall/detail?id='+order.id">
							<view class="u-flex u-flex-between  u-margin-bottom-10">
								<view class="font-size14 font-weight u-line-2">
									<text>{{order.ticket_title}} </text>
								</view>
								<view class="bright">
									<text>¥ {{order.price}} </text>
								</view>
							</view>
						</navigator>

						<view class="u-flex u-flex-between  u-margin-bottom-10">
							<view class="font-size14 color-gray">
								<text>{{order.ticket_subtitle}} </text>
							</view>
							<view class="bright">
								<text> × {{order.buy_num}} 张</text>
							</view>
						</view>
						<view class="u-flex u-flex-between ">
							<view class="font-size14  ">								 
								<text class="color-gray">{{order.good_title}}</text>								
							</view>
							<view class="bright" v-if="order.ticket_type==1">
								<text>{{order.select_day}}</text>
							</view>
							<view class="bright" v-else-if="order.ticket_type==2">
								<text>{{order.use_count}}次</text>
							</view>
							<view class="bright" v-else="order.ticket_type==3">
								<text>一年</text>
							</view>
						</view>
						<view class="u-flex u-flex-between u-margin-top-10">
							<view class="u-flex-grow"> </view>
							<view class="bright">
								<!-- 去支付按钮 -->
								<view v-if="order.unpaid" class="">
									<u-button @click="toPayOrder(order)" text="立即支付" size="small" shape="circle"
										type="primary" :plain="true"></u-button>
								</view>
								<!-- 去核销按钮 -->
								<view v-if="order.status_label=='process'" class="">
									
									<u-button @click="showQRcord(order)" icon="grid" text="去使用" size="small" shape="circle"
										type="error" :plain="true"></u-button>									 
								</view>
								<!-- 再次购买链接 -->
								<view v-if="order.status_label=='cancel'|| order.status_label=='completed' ||order.status_label=='refund'" class="">
									 <navigator :url="'/pages/mall/show?id='+order.good_id">
										<u-button text="再次购买" size="small" shape="circle" :plain="true"></u-button>
									 </navigator>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 金额信息 -->
				<view v-if="order.unpaid" class="box-bottom">
					<view class="font-size14 u-margin-top-15">
						<text>总价：</text><text>¥{{order.order_money}}</text>
						<text class="u-margin-left-20">优惠：</text>
						<text>¥{{order.discount_money}}</text>
						<text class="font-weight u-margin-left-20">实付：</text>
						<text class="font-weight  color-red">¥{{order.total_price}}</text>
					</view>
				</view>
			</view>

			<up-empty v-if="orderList.length==0" mode="shop" text="暂无数据" icon="/static/empty/order.png"> </up-empty>

		
		</view>

		<showQrcode v-if="showQrModal" v-model:modalShow="showQrModal" :qrcodeContent="qrcodeContent"></showQrcode>
		<!-- 显示核销码弹窗 -->
		<kb-footer :color="ee.bgColor.weight"></kb-footer>

	</kb-layout>
</template>

<script>
	import {
		userOrderList
	} from "@/common/api.js";
	
	import showQrcode from "../mall/componets/show-qrcode.vue";

	import {
		wxpayHelper
	} from "../../common/tools/wxpay";

	export default {
		components:{
			showQrcode
		},
		name: "pageOrder",
		props: {
			title: {
				Type: String,
				default: ''
			},
			reachBottom: {
				type: Number,
				default: undefined
			}
		},
		data() {
			return {
				showQrModal: false,//核心弹窗
				qrcodeContent:'', //核销码内容
				tabs: [{
						name: '全部',
						status: 'all'
					},
					{
						name: '待支付',
						status: 'unpaid'
					},
					{
						name: '待出行',
						status: 'process'
					},
					{
						name: '待评价',
						status: 'completed'
					},
					{
						name: '退款/售后',
						status: 'refund'
					}
				],
				query: {
					page: 1,
					status: 'all',
					limit: 5
				},
				orderList: [],
				total: 0,
				nomore: true,
			}
		},
		methods: {
			onTabClick(e) {
				console.log(e)
				this.orderList = [];
				this.query.status = e.status;
				this.query.page = 1;
				this.fetchData();
			},
			fetchData() {
				uni.showLoading({
					title: 'Loading...'
				});
				userOrderList(this.query).then(ret => {
					if (ret.data.length > 0) {

						this.query.page = this.query.page + 1;
						this.total = ret.total;
						this.orderList = this.orderList.concat(ret.data);
					}
					uni.hideLoading();
				})
			},
			//复制订单号
			copyOrderNo(order_no) {
				uni.setClipboardData({
					data: order_no,
					success: () => uni.$u.toast('复制成功')
				})
			},
			onReachBottom() {
				if (this.total && this.total < this.query.page * this.query.limit)
					this.nomore = true;
				else
					this.total > 1 && this.fetchData();

				return true;
			},
			//下拉刷新-更新组件数据-暂时未用到
			onPullDownRefresh() {
				this.query.page = 1;
				this.orderList = [];
				this.nomore = false;
				this.fetchData()
				setTimeout(() => {
					uni.stopPullDownRefresh()
				}, 1000)

			},
			//去支付
			toPayOrder(order) {
				//发起支付
				wxpayHelper(order.total_price, {
					order_no: order.order_no
				}).then((ret) => {
					uni.$u.toast('支付成功');
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/mall/detail?id=" + order_id
						})
					}, 2000);

				}, (error) => { //wxpayHelper 的reject
					uni.$u.toast(error.message)
				})
			},
			//显示核销的二维码
			showQRcord(order){
				this.showQrModal = true;
				this.qrcodeContent = order.qrcode_value;
			}

		},
		mounted() {
			this.fetchData();
		},
		watch: {
			reachBottom: function(n, o) {
				// console.log('watch', n)
				this.onReachBottom()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head-tabs {
		background-color: #fff;

	}

	.list-box {
		.box-bd {
			background-color: #fff;
			border-radius: 10px;
		}

		.bright {
			width: 25%;
			text-align: right;
		}

		.copy {
			border: $u-border-color 1px solid;
			font-size: 11px;
			padding: 2px 5px;
			margin-left: 10px;
			border-radius: 5px;
		}

		.ticket-type {
			display: flex;

			.tags {
				background-color: #EAEDFD;
				color: $u-primary;
				border-top-left-radius: 10px;
				border-bottom-right-radius: 5px;
				padding-right: 15px;
				padding-left: 15px;
			}
		}

		.box-bottom {
			text-align: right;
		}
	}
</style>